// RippleButton.qml
import QtQuick 2.15
import QtQuick.Controls 2.15
import QtQuick.Controls.Material 2.15
import QtQuick.Layouts 1.15

Item {
    id: root
    property alias text: label.text
    signal clicked()

    Rectangle {
        id: background
        anchors.fill: parent
        color: "#2196f3"
        radius: height / 2
        clip: true
    }

    Text {
        id: label
        anchors.centerIn: parent
        color: "white"
        font.pixelSize: 16
    }

    // 波纹圆形
    Rectangle {
        id: ripple
        visible: false
        width: rippleRadius * 2
        height: rippleRadius * 2
        radius: rippleRadius
        color: "#ffffff"
        opacity: rippleOpacity
        anchors.centerIn: undefined
        x: rippleX - rippleRadius
        y: rippleY - rippleRadius
    }

    property real rippleX: 0
    property real rippleY: 0
    property real rippleRadius: 0
    property real rippleOpacity: 0.3

    MouseArea {
        id: mouseArea
        anchors.fill: parent
        onClicked: {
            // 设置点击中心
            rippleX = mouse.x
            rippleY = mouse.y
            rippleRadius = 0
            ripple.opacity = 0.3
            ripple.visible = true

            radiusAnim.running = false
            opacityAnim.running = false

            radiusAnim.to = Math.max(width, height)
            radiusAnim.from = 0
            radiusAnim.running = true

            opacityAnim.from = 0.3
            opacityAnim.to = 0
            opacityAnim.running = true

            // 触发按钮点击
            root.clicked()
        }
    }

    NumberAnimation {
        id: radiusAnim
        target: root
        property: "rippleRadius"
        duration: 500
        easing.type: Easing.OutQuad
        onStopped: ripple.visible = false
    }

    NumberAnimation {
        id: opacityAnim
        target: root
        property: "rippleOpacity"
        duration: 500
        easing.type: Easing.OutQuad
    }
}

